<template>
  <div>
    <el-breadcrumb separator="/">
      <el-breadcrumb-item v-for="item in matchedList" :key="item">
        <span>{{ item }}</span>
      </el-breadcrumb-item>
    </el-breadcrumb>
  </div>
</template>

<script>
export default {
  data() {
    return {
      matchedList: []
    }
  },
  watch: {
    $route(value) {
      this.breadcrumb(value)
    }
  },
  mounted() {
    this.breadcrumb(this.$route)
  },
  methods: {
    breadcrumb(value) {
      const menuList = this.$store.getters.getMenu

      function findParents(treeData, id) {
        let allparents = []
        if (treeData.length === 0) return
        let findele = (data, id) => {
          if (!id) return
          data.forEach((item) => {
            if (item.id === id) {
              allparents.unshift(item.name)
              findele(treeData, item.parentId)
            } else {
              if (!!item.children) {
                findele(item.children, id)
              }
            }
          })
        }
        findele(treeData, id)
        return allparents
      }

      if (value.meta.path === 'order/orderDetails') {
        this.matchedList = [this.$t('详情')]
      } else if (value.meta.path === 'product/productConfig') {
        this.matchedList = value.matched.map(item => item.meta.title)
      } else {
        this.matchedList = findParents(menuList, value.meta.id)
      }
    },
  }
}
</script>

<style scoped>

</style>
